<template>
    <div class="hilo" ref="hilo">


    </div>
</template>

<script>
import Hilo from "hilojs";
import Game from "../../until/game";
import { useRoute, useRouter } from 'vue-router';
import api from '@/api/user'
import { useAuthStore } from '../../store/index';
export default {
    name: '',
    data() {
        return {
            game: new Game(),
            scorePopup: false,
            Store: useAuthStore()
        };
    },
    watch: {
        gameTime(val) {
            let that = this;
            if (val == 0) { //游戏结束

                setTimeout(() => {
                    this.scorePopup = true;
                    this.$router.push({
                        path: "/gametopic", query: {
                            processnum: that.$route.query.processnum
                        }
                    }); // 跳转到游戏结束页面
                }, 1500);
            }
        }
    },
    computed: {
        score() {
            return this.game.score
        },
        gameTime() {
            return this.game.gameTime
        }
    },
    methods: {
        gettopic() {
            let that = this;
            let number = 10;
            if (that.$route.query.processnum / 8 > 3) {
                number = 6;
            }
            api.gettestId({
                level: that.$route.query.processnum,
                count: number
            }).then((res) => {
                let topics = res.data.reduce((res, item) => {
                    let x = item;
                    x["answer"] = that.$route.query.processnum % 4;
                    if (x["answer"] == 0) {
                        x["answer"] = 4;
                    }
                    res.push(x);
                    return res;
                }, []);

                // 复制原始 topics 数组的索引
                let indices = Array.from({ length: topics.length }, (_, i) => i);

                // 打乱索引数组
                indices = indices.sort(() => Math.random() - 0.5);

                // 获取前半部分的索引
                const half = Math.floor(topics.length / 2);
                const firstHalfIndices = indices.slice(0, half);

                // 设置前半部分的 topictype 为 0
                for (let i = 0; i < firstHalfIndices.length; i++) {
                    topics[firstHalfIndices[i]]["topictype"] = 0;
                }

                // 设置剩余部分的 topictype 为 1
                for (let i = half; i < indices.length; i++) {
                    topics[indices[i]]["topictype"] = 1;
                }

                console.log(topics);
                that.Store.settopics(topics);
            });
        }
    },
    mounted() {
        this.Store.setshuaxin(0);
        console.log(this.Store.topics);
        if (this.Store.nowtopic % 4 != 0) {
            this.$router.push({ path: "gametopic", query: { processnum :this.$route.query.processnum} })
        }
        if (this.Store.topics == null || this.Store.topics.length == 0) {
            this.gettopic();
        }
        this.game.page = this.$refs.hilo;
        this.game.init();
    },

}
</script>
<style>
canvas {
    top: 0px;
    left: 0px;
    width: 100vw !important;
    height: 100vh !important;
}
</style>